<!-- 管理员管理 -->
<template>
    <div>
        <div class="header">
            管理员列表
        </div>
        <div class="top">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="关键字">
                    <el-input v-model="query.key" placeholder="关键字"></el-input>
                    <el-button type="primary" style="width:100px; margin-left:50px" @click="onSubmit">查询</el-button>
                </el-form-item>
                <div style="padding:0 25px">
                    <el-button type="primary" style="width:100px;" @click="dialogVisible = true">添加</el-button>
                </div>
            </el-form>
        </div>
        <div style="padding: 20px;">
            <Table :tableData="tableData" :tableCols="tableCols" :total="total" :selection="selection"
                @pagechenge="pagechange">
                <template #option="{ row }">
                    <el-button @click="handleClick(row)" type="success">修改
                    </el-button>
                    <el-button type="danger" @click="del(row.id)">删除</el-button>
                </template>
            </Table>
        </div>
        <!-- 添加 -->
        <div>
            <Add :dialogVisible="dialogVisible" @isclose="isclose" :handleClickdata="handleClickdata"></Add>
        </div>
    </div>
</template>

<script>
import Table from './Table/Table.vue'
import Add from '@/components/add/addadmin.vue'
import { List, Del } from '@/api/adminstrator'
export default {
    components: {
        Table,
        Add
    },
    data() {
        return {
            dialogVisible: false,
            selection: true,
            form: {

            },
            tableData: [],
            tableCols: [
                {
                    prop: 'id',
                    lable: "ID",
                },
                {
                    prop: 'username',
                    lable: "登录账号",
                },
                {
                    prop: 'name',
                    lable: "姓名",
                },
                {
                    prop: 'tel',
                    lable: "手机号",
                },
                {
                    prop: 'typeName',
                    lable: "类型",
                },
                {
                    lable: "操作",
                    coltype: "option",
                    slotname: 'option'
                },
            ],
            total: 0,
            query: {
                page: 1,
                psize: 5,
                key: ""
            },
            handleClickdata: {}
        }
    },
    created() {
        this.getList()
    },
    methods: {
        pagechange(pageconfig) {
            this.query = pageconfig
            this.getList()
            console.log(pageconfig);
        },
        async getList() {
            let res = await List(this.query)
            if (res.errCode == 10000) {
                this.tableData = res.data.list
                this.total = res.data.counts
            }
        },
        handleClick(data) {
            this.handleClickdata = data
            this.dialogVisible = true
        },
        // 查询
        onSubmit() {
            this.getList()
        },
        isclose(val, isrefresh = false, clear = {}) {
            this.dialogVisible = val
            this.form = clear
            if (isrefresh) {
                this.getList()
            }
        },
        del(id) {

            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                let res = await Del({ id: id })
                if (res.errCode == 10000) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getList()
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
    },

}
</script>

<style lang="less" scoped>
.header {
    display: flex;
    position: relative;
    padding: 0 10px;
    height: 50px;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    color: #427ff4;
    font-size: 16px;
}

.el-form-item {
    margin-bottom: 22px;
    width: 100%;
    height: 40px;

    .el-input {
        width: 120px;
    }
}
</style>